<!--
 * @Author: 曹捷
 * @Date: 2020-06-16 17:56:59
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-12-07 10:22:19
 * @Description: 图片上传 以及显示 ，以及单纯展示图片
--> 
<template>
  <div class="upload-img">
    <div class="flex-row">
      <span class="img-item m-b-10" v-if="fileUrl">
        <image :src="fileUrl" @click="itemClick" class="image" mode="aspectFill" />
        <span class="remove-show remove" v-if="hasRemove"></span>
        <span class="hover-item remove-show">
          <i @click="itemClick" class="iconfont icon-pic p-r-15" style="color:#fff" v-if="showImg"></i>
          <i @click="remove" class="iconfont icon-delete" style="color:#fff" v-if="hasRemove"></i>
          <slot></slot>
        </span>
      </span>
      <span @click="uploadImg({count:1})" class="img-item m-b-10 flex-c-c" v-else-if="upload">
        <span class="iconfont icon-add"></span>
      </span>
    </div>
  </div>
</template>

<script>
import utilMix from './../../mixin/utilMix'
export default {
  mixins: [utilMix],
  props: {
    upload: {
      type: Boolean,
      default: true,
    },
    hasRemove: {
      type: Boolean,
      default: true,
    },
    value: {
      type: String,
      default: '',
    },
    showImg: {
      type: Boolean,
      default: false,
    },
    uploadSuccess: {
      type: Function
    }
  },
  data () {
    return {
      fileUrl: '',
    }
  },
  watch: {
    value (value, old) {
      this.fileUrl = value
    },
  },
  methods: {
    itemClick () {
      if (this.showImg) {
        uni.previewImage({
          urls: [this.fileUrl],
          success () { },
        })
      }
      this.$emit('click')
    },
    imgSuccess (file) {
      if (this.uploadSuccess) {
        let value = this.uploadSuccess(file)
        this.fileUrl = value
        this.$emit('input', this.fileUrl)
      }
    },
    remove (index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除嘛',
        success: (res) => {
          if (res.confirm) {
            this.fileUrl = ''
            this.$emit('input', this.fileUrl)

          }
        },
      })
    },
  },
  mounted () {
    this.fileUrl = this.value

    this.imgList = this.$util.util.cloneObj(this.dataList)
  },
}
</script>

<style lang="scss">
//------------------------------start---------------- 图片上传部分样式
.upload-img.right {
  .flex-row {
    justify-content: flex-end;
  }
}
.upload-img.left {
  .flex-row {
    justify-content: flex-start;
  }
}
.upload-img {
  // 一行展示三个图
  .img-item-bak {
    width: 200rpx;
    height: 2rpx;
  }
  .img-item {
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
    border: 1rpx dashed #99a2b0;
    display: inline-block;
    text-align: center;
    // line-height: 100px;
    position: relative;
    .remove-show {
      display: none;
      .iconfont {
        font-size: 42rpx;
      }
    }
    .remove {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      background: #7a828f;
      opacity: 0.3;
    }
    .hover-item {
      position: absolute;
      font-size: 40rpx;
      color: #5f6773;
      top: 50%;
      margin-top: -24rpx;
      width: 100%;
      text-align: center;
      left: 0;
    }
    .image {
      width: 100%;
      height: 100%;
    }
    .icon-add {
      font-size: 70rpx;
      color: #99a2b0;
    }
  }
  .img-item:hover {
    border: 1rpx solid #60d4fb;
    .remove-show {
      display: inline-block;
    }
  }
}
.upload-four {
  .img-item {
    width: 160rpx;
    line-height: 160rpx;
    height: 160rpx;
  }
  .img-item-bak {
    width: 160rpx;
    height: 2rpx;
  }
}
.upload-five {
  .img-item {
    width: 130rpx;
    height: 130rpx;
    line-height: 130rpx;
  }
  .img-item-bak {
    width: 130rpx;
    height: 2rpx;
  }
}
//------------------------------end---------------- 图片上传部分样式
</style>